// 采用commonjs
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
    mode: 'production',                 //生产:development,开发:production
    /* 
    1、entry:
        1、单入口，字符串表示-----打包一个chunk，生成一个build
            entry:'./src/index.js',
        2、多入口，数组------打包成一个chunk，生成一个build
            entry:['./src/index.js'，'./src/cc.js'],
        3、对象的写法  -----有几个文件生成几个chunk，生成几个build
            entry:{
                one:'./src/one.js',
                two:'./src/two.js'
            }
    */
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        // **对象多入口写法entry： filename:'[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    // loader  处理非js资源   如html，css，img
    module: {
        rules: [
            /* 
                一个用    loader：css-loader
                一个以上  use:[]
                从右往左
                 {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader']
                },
            */

            {
                test: /\.css$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                loader: 'url-loader',
                options: {
                    publicPath:'./images/',
                    outputPath: 'imgs/',
                    name:'[name][hasg].[ext]',//命名hash+名称
                    limit:1024*8,//限制8k一下转base64
                }
            },
            {
                test: /\.(html)$/,
                loader: 'html-loader',
            },
            {
                // exclude 排查资源
                exclude:/\.(js|json|html|css|less|scss|png|jpg)$/,
                loader:'file-loader',
                options:{
                    outputPath: 'font/', //大包位置
                    publicPath:'./font', //寻找位置
                    name:'[name][hasg].[ext]',//命名hash+名称
                   
                }
            },
            // eslint 只检查js
            {
                test: /\.js$/,
               //只检查自己写的代码，不检查第三方的
               exclude:/node_modules/,
               loader:'eslint-loader',
               options:{
                   fix:true,//自动修复
               }
            },
        ]
    },
    // plugin插件，执行范围更广的任务  打包到开发压缩
    plugins: [
        // 打包压缩html（打包多个就实例化new多个）
        new htmlWebpackPlugin({
            template: './src/index.html', //打包的文件
            filename: 'demo.html',     //打包后的名称
            chunks: [],               //指定使用的js文件
            minify: {                  //压缩
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
            }
        }),
        new miniCssExtractPlugin({ filename: 'demo.css' }),
        new optimizeCssAssetsWebpackPlugin()
    ],
    // 在webpack5 需要加上这个选项才会自动刷新页面
    target:"web",

    devServer:{
        port:3001,
        compress:true,//自动更新
        open:true,//自动打开浏览器
        hot:true//HMR模块热替换
    }
}